<template>
	<view class="comAll" v-if="info">
		<view class="comTop">
			<view class="comTopTitle">
				{{info.title}}
			</view>
			<view class="statusIcon">
				<image :src="info.status === 'be_confirmed'?statusIcon:confirmedIcon" mode="widthFix"></image>
			</view>
			<view class="comTopInfoView">
				<view class="comTopInfo">
					<view class="comTopInfoItem">
						<view v-for="(item, index) in titleInfo" :key="index">{{item.title}}: {{info[item.code] ? info[item.code] : '--'}}</view>
					</view>
					<view class="comTopInfoItem">
						<view v-for="(item, index) in buyerInfoList" :key="index">{{index === 0 ? prefix + item.title : item.title}}: {{info[item.code]  ? info[item.code] : '--'}}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="comBottom">
			<view class="scrollTitle">
				<text>
					选品清单
				</text>
				<text>
					滑动查看详情
				</text>
			</view>
			<scroll-view scroll-x="true" class="scrollPage" id="scrollView">
				<view class="myTable">
					<view v-for="(listKey, key , index) in listTitle" :key="key" class="myTableBody">
						<view class="myTableTh">
							{{listKey.title}}
						</view>
						<view class="myTableTd" v-for="(item, index) in info.food" :key="index">
							{{listKey.code === 'index' ? index + 1 : item[listKey.code] !== ''? item[listKey.code]: '--'}}
							<template v-if="item[listKey.code] !== ''">
								{{listKey.code === 'price' || listKey.code === 'commission' ? '元' : listKey.code === 'commission_percentage' ? '%' : ''}}
							</template>
						</view>
					</view>
				</view>
				<!-- <view class="myTabelAll"> -->
					<!-- <text class="myTabelAllTitle">采购金额总计：</text>
					<text class="myTabelAllAmount">{{info.price}}元</text> -->
					<!-- <text class="myTabelAllTitle">佣金金额总计：</text>
					<text class="myTabelAllAmount">{{info.commission}}元</text> -->
				<!-- </view> -->
			</scroll-view>
		</view>
		<view class="bottomTip">
			<view class="bottomTipContent">
				<view class="bottomTipLeft">
					<text>备注：</text>
				</view>
				<view class="bottomTipRight">
					<uParse :content="info.remark?info.remark : '--'"/>
				</view>
			</view>
			<view class="bottomTipSeal">
				<view class="bottomTipSealView">
					<view class="seal" @click="previewImage([info.seal])">
						<image :src="info.seal" mode="widthFix"></image>
					</view>
					<view class="sealDate" v-if="info.create_time">
						<text>{{formatTime(time, 'Y-M-D')}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { formatTime, previewImage } from '@/utils/tools.js'
	import { uParse } from '@/components/gaoyia-parse/parse.vue'
	export default {
		props:{
			info:Object,
		},
		computed:{
			time(){
				if(this.info && this.info.create_time) {
					return this.info.create_time
				} else {
					return ''
				}
			},
			prefix() {
				if(this.$store.getters.getUserInfo.category === 'supplier') {
					return '供应商'
				} else {
					return '买手'
				}
			}
		},
		methods:{
			formatTime,
			previewImage,
		},
		components:{
			uParse,
		},
		data() {
			return {
				statusIcon: require('../../static/report/pass.png'),
				confirmedIcon: require('../../static/order/isOK.png'),
				titleInfo: [
					{
						title:'甲方',
						code:'first'
					},
					{
						title:'联系人',
						code:'first_name'
					},
					{
						title:'联系电话',
						code:'first_phone'
					},
					{
						title:'联系地址',
						code:'first_address'
					}
				],
				buyerInfoList: [
					{
						title:'编号',
						code:'secondNo'
					},
					{
						title:'乙方',
						code:'second'
					},
					{
						title:'联系电话',
						code:'second_phone'
					},
					// {
					// 	title:'供应商名称',
					// 	code:'second_supplier'
					// },
					// {
					// 	title:'联系地址',
					// 	code:'second_address'
					// }
				],
				listTitle: [ // 序号 采购单价 佣金比率 佣金金额 商品名称 商品编码 商品规格 采购单位 商品外包装 商品内包装 配送方式
					{
						title:'序号',
						code:'index'
					},
					{
						title:'采购单价',
						code:'price'
					},
					{
						title:'佣金比率',
						code:'commission_percentage'
					},
					{
						title:'佣金金额',
						code:'commission'
					},
					{
						title:'商品名称',
						code:'name'
					},
					{
						title: '商品编码',
						code: 'submissionNo',
					},
					// {
					// 	title:'食材产地',
					// 	code:'place_of_origin'
					// },
					{
						title:'商品规格 ',
						code:'specification'
					},
					{
						title:'采购单位',
						code:'units'
					},
					{
						title:'商品内包装',
						code:'inside_packing'
					},
					{
						title:'商品外包装',
						code:'external_packing'
					},
					// {
					// 	title:'月供应量',
					// 	code:'supply'
					// },
					// {
					// 	title:'供应周期',
					// 	code:'cycle'
					// },
					// {
					// 	title:'保质期',
					// 	code:'shelf_life'
					// },
					// {
					// 	title:'存储方式',
					// 	code:'environment'
					// },
					{
						title:'配送方式',
						code:'distribution_type'
					},
					// {
					// 	title:'发货时效',
					// 	code:'delivery_time'
					// },
					{
						title:'备注',
						code:'remark'
					}
				]
			}
		}
	}
</script>

<style scoped>
	.comAll {
		background-color: #FFF;
		box-shadow: 0 0 30upx -15upx #f03d3d;
		padding: 26.66upx 0;
		height: 100%;
		border-radius: 10upx;
		margin: 17upx 0 40upx 0;
	}

	.comTop {
		position: relative;
		display: flex;
		flex-wrap: wrap;
	}

	.comTopTitle {
		text-align: center;
		font-size: 36upx;
		color: #333333;
		font-weight: bold;
		width: 100%;
		margin-bottom: 5upx;
	}

	.statusIcon {
		position: absolute;
		right: 0;
		top: 80upx;
		transform: rotate(25deg);
	}

	.statusIcon image {
		width: 190upx;
	}

	.comTopInfoView {
		width:100%;
		display: flex;
		margin: 10upx 15upx 0 15upx;
	}

	.comTopInfo {
		width:100%;
		margin: 0 auto;
		padding-top: 8upx;
	}
	.comTopInfoItem{
		border-radius: 15upx;
		background-color: #eeeeee;
	}
	.comTopInfoItem:first-child{
		margin-bottom: 10upx;
	}

	.comTopInfo view {
		font-size: 30.66upx;
		color: #333333;
		padding: 5upx 10upx;
	}
.comBottom{
	margin: 40upx 0;
}
	.scrollPage {
		margin-top: 10upx;
	}
	
	.scrollTitle {
		box-sizing: border-box;
		
		padding: 0 10upx;
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		color: #333333;
		font-weight: bold;
		/* padding-left: 13.33upx; */
	}
	.scrollTitle text:nth-of-type(2){
		font-size: 24upx;
		color: #e87575;
	}
	
	.tableTip{
		position: absolute;
		right:25upx;
		font-size: 24upx;
		color: #e87575;
	}
	
	.myTable {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
	}

	.myTableBody {
		color: #6d6d6d;
	}

	.myTableTh {
		font-size: 26.66upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		border-top: 1px solid #ffc8c7;
		padding: 3upx 20upx;
	}

	.myTableTd {
		font-size: 24upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		border-top: 1px solid #ffc8c7;
		padding: 3upx 20upx;
	}

	.myTableTd:last-child {
		border-bottom: 1px solid #ffc8c7;
	}
	.myTabelAll {
		display: flex;
		width: 100%;
		padding: 3upx 0;
	}
	.myTabelAll text{
		white-space:nowrap;
	}
	
	.myTabelAllTitle {
		font-size: 24upx;
		color: #333333;
		font-weight: bold;
		padding-left: 50upx;
	}
	
	.myTabelAllAmount {
		font-size: 24upx;
		color: #f7533e;
		padding-left: 30upx;
	}
	
	.bottomTip {
		margin: 0upx 30upx 0 30upx;
		border-radius: 10upx;
		background-color: #f2f2f2;
		padding: 26.66upx 26.66upx 16.66upx 26.66upx;
	}
	
	.bottomTipContent {
		display: flex;
	}
	
	.bottomTipLeft {
		width:13%;
		font-size: 24upx;
		color:#6d6d6d;
	}
	
	.bottomTipRight {
		width:90%;
	}
	.bottomTipRight text{
		display: block;
	}
	
	.bottomTipSeal {
		display: flex;
		justify-content: flex-end;
	}
	.bottomTipSealView{
		
	}
	.seal {
		/* background-color: #626262; */
		width:186.66upx;
		/* height:128upx; */
		/* border-radius: 50%; */
		/* overflow: hidden; */
	}
	.seal image{
		width:186.66upx;
		/* height:128upx; */
		/* border-radius: 50%; */
		/* overflow: hidden; */
	}
	
	.sealDate {
		font-size: 20upx;
		color:#6d6d6d;
		text-align: center;
		padding-top: 17upx;
	}
</style>
